<template>
  <div>
    <van-tabbar v-model="selected">
      <van-tabbar-item @click="pushPage('/')">
        <i :class="[selected=='0'?'icon_home_selected':'icon_home','my_footer_icon']"></i>        
        <span>{{$t("lang.Uhome")}}</span>
      </van-tabbar-item>
      <van-tabbar-item @click="pushPage('/tradIndex')">
        <i :class="[selected=='1'?'icon_machine_selected':'icon_machine','my_footer_icon']"></i>
        <span>{{$t("lang.Utrading")}}</span>
      </van-tabbar-item>
      <van-tabbar-item @click="pushPage('/assetIndex')">
        <i :class="[selected=='2'?'icon_tradeMarket_selected':'icon_tradeMarket','my_footer_icon']"></i>
        <span>{{$t("lang.Uassets")}}</span>
      </van-tabbar-item>
      <van-tabbar-item @click="pushPage('/my')">
        <i :class="[selected=='3'?'icon_my_selected':'icon_my','my_footer_icon']"></i>
        <span>{{$t("lang.Umy")}}</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "myFooter",
  data() {
    return {};
  },
  components: {},
  computed: {
    selected: {
      get() {
        return this.$store.state.footerSelected;
      },
      set(newValue) {
        this.$store.state.footerSelected = newValue;
      }
    }
  },

  watch: {},
  methods: {
    pushPage(path) {
      this.$router.replace(path);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
.van-tabbar-item--active{
  color: #740201!important;
}
.van-tabbar-item{
  flex-direction: column-reverse!important;
}
.my_footer_icon{
  background-image: url(../assets/img/foot_icon.png);
  width: 26px;
  height: 26px;
  padding-bottom: 2px;
  background-size: cover;
  margin: auto;
  display: block;
}
.icon_home{
  background-position:54% 0;
}
.icon_home_selected{
  background-position: 2.5% 0;
}

.icon_machine{
  background-position: 65% 0;
}
.icon_machine_selected{
  background-position: 13% 0;
}

.icon_tradeMarket{
  background-position:75% 0;
}
.icon_tradeMarket_selected{
  background-position: 23% 0;
}
.icon_app{
  background-position:85% 0;
}
.icon_app_selected{
  background-position: 33% 0;
}
.icon_my{
  background-position: 95% 0;
}
.icon_my_selected{
  background-position: 43% 0;
}
</style>
